<template>
    <div>
        <vheader :ismini="iscollapse"></vheader>
        <el-container class="content_main" style="border:0px solid #e3e3;">
            <el-main >
                <!-- <el-steps :active="0" align-center>
                    <el-step title="新增主题"></el-step>
                    <el-step title="新增（关联）属性"></el-step>
                    <el-step title="新增产品"></el-step>
                </el-steps> -->
                <el-row >
                    <el-col :span="20" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" :push="2" :pull="2">
                        <el-steps :active="0" simple >
                            <el-step title="新增主题" icon="el-icon-edit"></el-step>
                            <el-step title="新增产品" icon="el-icon-picture"></el-step>
                            <el-step title="新增（关联）属性" icon="el-icon-upload"></el-step>
                        </el-steps>
                    </el-col>
                     <el-col :span="16" :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :push="4" :pull="4" class="pageleft">
                        <el-row :gutter="20" style="border:0px solid red;">
                            <el-col :span="24" >
                                <div class="grid-content" style="padding-top:20px;">
                                    <el-form ref="form" :model="form" label-width="80px">
                                        <el-form-item label="主题名称">
                                            <el-input v-model="form.FullName"></el-input>
                                        </el-form-item>
                                        <el-form-item label="主题简称">
                                            <el-input v-model="form.ShortName"></el-input>
                                        </el-form-item>
                                        <el-form-item label="主题类型">
                                            <el-select v-model="form.SubjectType" placeholder="请选择活动区域">
                                                <el-option :label="s.name" v-for="s in baseDate.SubjectTypelist" :value="s.id" :key="s.id"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="标签">
                                            <el-checkbox-group v-model="tags">
                                            <el-checkbox :label="tag" :key="tag" v-for="tag in baseDate.Taglist" name="type"></el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                        <el-form-item label="简述">
                                            <el-input type="textarea" v-model="form.Resume"></el-input>
                                        </el-form-item>
                                        <el-form-item label="说明">
                                            <mavonEditor v-model="form.Remark" mode="edit" :height="330"></mavonEditor>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="onSubmit">{{form.Id>0?"更新":"创建"}}主题，下一步</el-button>
                                            <el-button>取消</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>

            </el-main>
        </el-container>
    </div>
</template>

<script>
import vheader from "../common/Header";
import vfooter from "../common/Footer";
import mavonEditor from "../common/ui/editor";
// import { mavonEditor } from 'mavon-editor';
// import Marked from 'marked';
import { SubjectType, Tag, page, page_rule } from "../../data/base_data";
import { baseUrl, routerMode, baseImgPath } from "../../config/env";

export default {
  data() {
    return {
      iscollapse: false,
      isshowfooter: false,
      key: "",
      baseDate: {
        SubjectTypelist: [],
        Taglist: [],
        curpage: {}
      },
      loadDate: {
        draftSubjectList: []
      },
      tags: [],
      form: {
        SubjectType: 1,
        FullName: "",
        ShortName: "",
        EnName: "",
        Tag: "",
        tags: "",
        Remark: "",
        Resume: "",
        CreateTime: ""
      }
    };
  },
  watch:{
      '$route':'fetchData'
  },
  methods: {
    fetchData:function(){
        this.form.Id = this.$route.params.sid;
        this.loadSubjectByID();
    },
    loadSubjectByID: function(subjectid) {
      if(!this.form.Id) return;
      var rule = {
        Field: "Id",
        Value: this.form.Id,
        Operate: 3
      };
      this.baseDate.curpage.FilterGroup.Rules = [rule];
      this.$http
        .post(baseUrl + "api/Admin/ContrastSubject/Read", this.baseDate.curpage)
        .then(
          function(res) {
            this.tags = res.body.Rows[0].Tag.split(",");
            console.log(res.body.Rows[0]);
            this.form = res.body.Rows[0];
          },
          function(res) {
            alert("操作数据获取失败");
          }
        );
    },
   
    onSubmit: function() {
      this.form.CreatedTime = "2018-09-13 03:32:21";
      this.form.Tag = this.tags.join(",");
      debugger
      //post数据
      this.$http
        .post(
          baseUrl +
            "api/Admin/ContrastSubject/" +
            (this.form.Id > 0 ? "Update" : "Create"),
          [this.form]
        )
        .then(
          function(res) {
            if (res.body.Type == 200 || res.body.Type == 203) {
              this.$message({
                message: "【" + this.form.FullName + "】" + res.body.Content,
                type: "success"
              });
              var sid = res.body.Data || this.form.Id;
              this.$router.push({ path: `/step2/${sid}` }); // -> /user/123
            }
          },
          function(res) {
            alert("error:" + res.status);
          }
        );
    },
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd(pos, $file) {
      var formdata = new FormData();
      formdata.append("file", $file);
      // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
      this.$axios({
        url: "/common/upload",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      }).then(url => {
        this.$refs.md.$img2Url(pos, url);
      });
    },
    change(value, render) {
      // render 为 markdown 解析后的结果
      this.html = render;
    },
    convertHtml: function(ct) {
      return Marked(ct);
    }
  },
  mounted: function() {
    this.baseDate.SubjectTypelist = SubjectType;
    this.baseDate.Taglist = Tag;
    this.baseDate.curpage = page;
    let self = this;
    window.onresize = function() {
      self.clientHeight =
        document.documentElement.clientHeight - (this.isshowfooter ? 200 : 158);
      self.clientWidth = document.documentElement.clientWidth;
      $("#content_module").height(self.clientHeight);
      $(".pageleft").height(self.clientHeight - 10);

      //获取宽度
      self.iscollapse = self.clientWidth < 768;
    };
    window.onresize();
  },
  created(){
      this.baseDate.Taglist = Tag;
      this.baseDate.curpage = page;
      this.fetchData();
  },
  components: {
    vheader,
    vfooter,
    mavonEditor
  }
};
</script>
<style scoped>
#content_module {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.content_main {
  padding: 0;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
